<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        section {
            margin: 10px;
            outline: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>

<section id="panel">
    <article class="panel panel-default">
        <header class="panel-heading">
            <div class="panel-title">
                <h2>面板标题</h2>
            </div>
        </header>
        <article class="panel-body">面板内容</article>
        <footer class="panel-footer">面板注脚</footer>
    </article>
</section>

<section id="panel-color">
    <article class="panel panel-default">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
    <article class="panel panel-success">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
    <article class="panel panel-info">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
    <article class="panel panel-primary">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
    <article class="panel panel-warning">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
    <article class="panel panel-danger">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">面板内容</article>
    </article>
</section>

<section id="panel-element">
    <article class="panel panel-default">
        <header class="panel-heading">
            <div class="panel-title">面板标题</div>
        </header>
        <article class="panel-body">
            <table class="table table-striped table-hover table-bordered">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>备注</th>
                </tr>
                <tr>
                    <td>001</td>
                    <td>赵四</td>
                    <td>58</td>
                    <td>男</td>
                    <td>亚洲舞王</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>广坤</td>
                    <td>59</td>
                    <td>男</td>
                    <td>广坤山货</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>刘能</td>
                    <td>57</td>
                    <td>男</td>
                    <td>玉田花圃</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>大脚</td>
                    <td>56</td>
                    <td>女</td>
                    <td>大脚超市</td>
                </tr>
            </table>
        </article>
        <div class="list-group">
            <a href="#" class="list-group-item">青青河边草</a>
            <a href="#" class="list-group-item">一岁一枯荣</a>
            <a href="#" class="list-group-item">野火烧不尽</a>
            <a href="#" class="list-group-item">春风吹又生</a>
        </div>
        <footer class="panel-footer">面板注脚</footer>
    </article>
</section>

<script src="../../jquery/jquery-3.2.1.min.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>